<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-common-layout">
      <div class="JNPF-preview-main" >
        <el-page-header @back="goBack" content="资产处置" style="font-size: 8px!important;"/>
        <el-row :gutter="15" class="" style="margin-left: 20px">
          <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px"
                   label-position="right"
          >
            <template v-if="!loading">


              <el-col :span="14">
                <el-row :gutter="15">


                  <el-col :span="24">
                    <el-form-item label-width="0">
                      <groupTitle
                        content-position="left" :closable="false" content="新增过程处置"
                      >
                      </groupTitle>
                    </el-form-item>
                  </el-col>
                  <el-table border :data="zcglInfoList" size="mini">
                    <el-table-column type="index" width="50" label="序号" align="center"/>

                    <el-table-column prop="thingName" label="资产名称">
                      <template slot-scope="scope">
                        <span>{{ scope.row.zcName }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="thingPrice" label="资产代码">
                      <template slot-scope="scope">
                        <span>{{ scope.row.zcNumber }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="thingCount" label="资产标签">
                      <template slot-scope="scope">
                        <span>{{ scope.row.zcLabel }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="thingCount" label="资产地址">
                      <template slot-scope="scope">
                        <span>{{ scope.row.address }}</span>
                      </template>
                    </el-table-column>


                  </el-table>
                  <el-col :span="24" style="margin-top: 50px">
                    <el-form-item label="过程事件"
                                  prop="processEvents"
                    >
                      <el-input v-model="dataForm.processEvents"
                                placeholder="请输入" clearable :style='{"width":"100%"}'
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="经办人"
                                  prop="handledBy"
                    >
                      <el-input v-model="dataForm.handledBy"
                                placeholder="请输入" clearable :style='{"width":"100%"}'
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="过程附件"
                                  prop="processFile"
                    >
                      <JNPF-UploadFz v-model="dataForm.processFile"
                                     :fileSize="10" sizeUnit="MB" :limit="9" buttonText="点击上传"
                      >

                      </JNPF-UploadFz>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="简述"
                                  prop="sketch"
                    >
                      <el-input v-model="dataForm.sketch"
                                placeholder="请输入" :style='{"width":"100%"}' true type="textarea"
                                :autosize='{"minRows":4,"maxRows":4}'
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">

                      <el-button style="margin-left:47%" type="primary" icon="el-icon-plus" @click="request()">保存过程
                      </el-button>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="10">
                <el-row :gutter="15">
                  <el-col :span="24">
                    <el-form-item label-width="0">
                      <groupTitle
                        content-position="left" :closable="false" content="处置说明"
                      >
                      </groupTitle>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-timeline>
                      <el-timeline-item
                        v-for="(item, index) in dataForm.zcglZcczProcessEntitys"
                        :key="index"
                        :timestamp="item.creatortime"
                        placement="top"
                      >
                        <el-card style="background-color: #f6f4f4; width: 70%; display: flex; flex-direction: column;">
                          <h4>过程事件:{{ item.processEvents }}</h4>
                          <div style="display: flex; justify-content: space-between; align-items: center;margin-top: 10px">
                            <p>经办人:</p>
                            <p style="text-align: right; flex-grow: 1;">{{ item.handledBy }}</p>
                          </div>
                          <div style="display: flex; justify-content: space-between; align-items: center;margin-top: 10px">
                            <p>简述:</p>
                            <p style="text-align: right; flex-grow: 1;">{{ item.sketch }}</p>
                          </div>
                        </el-card>
                      </el-timeline-item>
                    </el-timeline>
<!--                    <el-tabs v-model="activexqljac" tab-position="top" class="mb-20">-->
<!--                      <el-tab-pane label="Tab 1">-->
<!--                      </el-tab-pane>-->
<!--                      <el-tab-pane label="Tab 2">-->
<!--                      </el-tab-pane>-->
<!--                    </el-tabs>-->
                  </el-col>
                </el-row>
              </el-col>
            </template>
          </el-form>
          <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm"
                        ref="selectDialog" @select="addForSelect" @close="selectDialogVisible=false"
          />
        </el-row>
      </div>
    </div>
  </transition>
</template>
<script>
import request from '@/utils/request'
import { getDataInterfaceRes } from '@/api/systemData/dataInterface'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'

export default {
  components: {},
  props: [],
  data() {
    return {
      // 时间线数据
      timelineData: [
        {
          timestamp: "2018/4/12",
          title: "更新 Github 模板",
          description: "王小虎 提交于 2018/4/12 20:46",
        },
        {
          timestamp: "2018/4/3",
          title: "修复 Bug",
          description: "王小虎 提交于 2018/4/3 15:30",
        },
        {
          timestamp: "2018/4/2",
          title: "发布新版本",
          description: "王小虎 提交于 2018/4/2 10:20",
        },
        // 可以继续添加更多的时间线项
      ],
      zcglInfoList: [],
      visible: false,
      loading: false,
      btnLoading: false,
      selectDialogVisible: false,
      currTableConf: {},
      addTableConf: {},
      tableRows: {},
      currVmodel: '',
      dataForm: {
        processEvents: '',
        handledBy: '',
        processFile: [],
        sketch: ''
      },
      activexqljac: '0',
      rules:
        {
          processEvents: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ]

        }

    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    save(){


    },
    goBack(isRefresh) {
      this.$emit('close', isRefresh)
      // this.$router.push(`/zcgl/zcglcwbill/index?id=${this.id}`)
    },
    clearData() {
      this.dataForm.processEvents = ''
      this.dataForm.handledBy = ''
      this.dataForm.processFile = []
      this.dataForm.sketch = ''
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs['elForm'].resetFields();
        if(this.dataForm.id){
          this.loading = true
          request({
            url: '/api/example/ZcglZccz/queryZcczgc/'+this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          });
        }else{
          this.clearData()
        }
      });
      this.$store.commit('generator/UPDATE_RELATION_DATA', {})
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          this.request()
        }
      })
    },
    request() {
      this.btnLoading = true
      let _data = this.dataList()
      var json  = {}
      if(_data.processFile!=null)

      {

        json.processFile = _data.processFile

      }

      json.handledBy = _data.handledBy
      json.sketch = _data.sketch
      json.processEvents = _data.processEvents

      _data.zcglZcczProcessEntity = json



      if (true) {
        request({
          url: '/api/example/ZcglZccz/addZcczgc',
          method: 'post',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.btnLoading = false
              // this.$emit('refresh', true)
              this.init(this.dataForm.id)
            }
          })
        }).catch(() => {
          this.btnLoading = false
        })
      } else {
        request({
          url: '/api/example/Zcgl_zccz_process/' + this.dataForm.id,
          method: 'PUT',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.btnLoading = false
              this.$emit('refresh', true)
            }
          })
        }).catch(() => {
          this.btnLoading = false
        })
      }
    },
    openSelectDialog(key) {
      this.currTableConf = this.addTableConf[key]
      this.currVmodel = key
      this.selectDialogVisible = true
      this.$nextTick(() => {
        this.$refs.selectDialog.init()
      })
    },
    addForSelect(data) {
      for (let i = 0; i < data.length; i++) {
        let item = { ...this.tableRows[this.currVmodel], ...data[i] }
        this.dataForm[this.currVmodel].push(item)
      }
    },
    dataList() {
      var _data = JSON.parse(JSON.stringify(this.dataForm))

      return _data
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      if(_dataAll.zcglZcczProcessEntity!=null){
        _dataAll.processFile = _dataAll.processFile ? JSON.parse(_dataAll.processFile) : []

      }

      this.zcglInfoList= _dataAll.zcglZcdjInfoEntities
      this.dataForm = _dataAll
    }
  }
}

</script>
<style scoped>
/deep/ .el-page-header__content {
  font-size: 15px;
}
</style>
